
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon xffont xf-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.xf-shanchu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.xf-time</div>
                </li>
            
                <li>
                <i class="icon xffont xf-tubiaozitihua04"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.xf-tubiaozitihua04</div>
                </li>
            
                <li>
                <i class="icon xffont xf-yiliao"></i>
                    <div class="name">医疗</div>
                    <div class="fontclass">.xf-yiliao</div>
                </li>
            
                <li>
                <i class="icon xffont xf-qzone"></i>
                    <div class="name">QQ空间</div>
                    <div class="fontclass">.xf-qzone</div>
                </li>
            
                <li>
                <i class="icon xffont xf-friends"></i>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">.xf-friends</div>
                </li>
            
                <li>
                <i class="icon xffont xf-yingyejiaofei"></i>
                    <div class="name">营业缴费</div>
                    <div class="fontclass">.xf-yingyejiaofei</div>
                </li>
            
                <li>
                <i class="icon xffont xf-renwucundang"></i>
                    <div class="name">任务-存档</div>
                    <div class="fontclass">.xf-renwucundang</div>
                </li>
            
                <li>
                <i class="icon xffont xf-cardid"></i>
                    <div class="name">身份证</div>
                    <div class="fontclass">.xf-cardid</div>
                </li>
            
                <li>
                <i class="icon xffont xf-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.xf-home</div>
                </li>
            
                <li>
                <i class="icon xffont xf-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.xf-user</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jiaoyu"></i>
                    <div class="name">教育</div>
                    <div class="fontclass">.xf-jiaoyu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-shanchu1"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.xf-shanchu1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jiaoyu-copy"></i>
                    <div class="name">教育</div>
                    <div class="fontclass">.xf-jiaoyu-copy</div>
                </li>
            
                <li>
                <i class="icon xffont xf-moban4gongzuojingli"></i>
                    <div class="name">模板4-工作经历</div>
                    <div class="fontclass">.xf-moban4gongzuojingli</div>
                </li>
            
                <li>
                <i class="icon xffont xf-luru"></i>
                    <div class="name">录入</div>
                    <div class="fontclass">.xf-luru</div>
                </li>
            
                <li>
                <i class="icon xffont xf-shijian"></i>
                    <div class="name">wait</div>
                    <div class="fontclass">.xf-shijian</div>
                </li>
            
                <li>
                <i class="icon xffont xf-biaoyang"></i>
                    <div class="name">表扬</div>
                    <div class="fontclass">.xf-biaoyang</div>
                </li>
            
                <li>
                <i class="icon xffont xf-bangding"></i>
                    <div class="name">绑定</div>
                    <div class="fontclass">.xf-bangding</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zhuanchu1"></i>
                    <div class="name">转出</div>
                    <div class="fontclass">.xf-zhuanchu1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-more1"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.xf-more1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-dangyuan"></i>
                    <div class="name">党员</div>
                    <div class="fontclass">.xf-dangyuan</div>
                </li>
            
                <li>
                <i class="icon xffont xf-xinlangweibo"></i>
                    <div class="name">新浪微博</div>
                    <div class="fontclass">.xf-xinlangweibo</div>
                </li>
            
                <li>
                <i class="icon xffont xf-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.xf-shouye</div>
                </li>
            
                <li>
                <i class="icon xffont xf-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.xf-message</div>
                </li>
            
                <li>
                <i class="icon xffont xf-query1"></i>
                    <div class="name">高级查询</div>
                    <div class="fontclass">.xf-query1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jianli-copy"></i>
                    <div class="name">简历</div>
                    <div class="fontclass">.xf-jianli-copy</div>
                </li>
            
                <li>
                <i class="icon xffont xf-more"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.xf-more</div>
                </li>
            
                <li>
                <i class="icon xffont xf-chaxun"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.xf-chaxun</div>
                </li>
            
                <li>
                <i class="icon xffont xf-qq2"></i>
                    <div class="name">qq</div>
                    <div class="fontclass">.xf-qq2</div>
                </li>
            
                <li>
                <i class="icon xffont xf-weixin11"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.xf-weixin11</div>
                </li>
            
                <li>
                <i class="icon xffont xf-folder"></i>
                    <div class="name">folder</div>
                    <div class="fontclass">.xf-folder</div>
                </li>
            
                <li>
                <i class="icon xffont xf-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.xf-weixin</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zixun"></i>
                    <div class="name">资讯</div>
                    <div class="fontclass">.xf-zixun</div>
                </li>
            
                <li>
                <i class="icon xffont xf-huodong"></i>
                    <div class="name">活动</div>
                    <div class="fontclass">.xf-huodong</div>
                </li>
            
                <li>
                <i class="icon xffont xf-dangan"></i>
                    <div class="name">档案</div>
                    <div class="fontclass">.xf-dangan</div>
                </li>
            
                <li>
                <i class="icon xffont xf-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.xf-rili</div>
                </li>
            
                <li>
                <i class="icon xffont xf-RMB"></i>
                    <div class="name">RMB</div>
                    <div class="fontclass">.xf-RMB</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jibenxinxi"></i>
                    <div class="name">基本信息</div>
                    <div class="fontclass">.xf-jibenxinxi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-liucheng_tianxieshenqingxinxi"></i>
                    <div class="name">流程_填写申请信息</div>
                    <div class="fontclass">.xf-liucheng_tianxieshenqingxinxi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-yanzhengma"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.xf-yanzhengma</div>
                </li>
            
                <li>
                <i class="icon xffont xf-youkuohao"></i>
                    <div class="name">右括号</div>
                    <div class="fontclass">.xf-youkuohao</div>
                </li>
            
                <li>
                <i class="icon xffont xf-reduce_circle"></i>
                    <div class="name">reduce_circle</div>
                    <div class="fontclass">.xf-reduce_circle</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jibenxinxi1"></i>
                    <div class="name">基本信息</div>
                    <div class="fontclass">.xf-jibenxinxi1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-huodongbaoming"></i>
                    <div class="name">活动报名</div>
                    <div class="fontclass">.xf-huodongbaoming</div>
                </li>
            
                <li>
                <i class="icon xffont xf-phone"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.xf-phone</div>
                </li>
            
                <li>
                <i class="icon xffont xf-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.xf-shezhi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.xf-fenxiang</div>
                </li>
            
                <li>
                <i class="icon xffont xf-dangyuanxinxi"></i>
                    <div class="name">党员信息</div>
                    <div class="fontclass">.xf-dangyuanxinxi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-danganguanli"></i>
                    <div class="name">档案管理</div>
                    <div class="fontclass">.xf-danganguanli</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zhanneixin"></i>
                    <div class="name">站内信</div>
                    <div class="fontclass">.xf-zhanneixin</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zhuanchu"></i>
                    <div class="name">转出</div>
                    <div class="fontclass">.xf-zhuanchu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zhuanru"></i>
                    <div class="name">转入</div>
                    <div class="fontclass">.xf-zhuanru</div>
                </li>
            
                <li>
                <i class="icon xffont xf-renzheng"></i>
                    <div class="name">认证</div>
                    <div class="fontclass">.xf-renzheng</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jiaoyu1"></i>
                    <div class="name">教育</div>
                    <div class="fontclass">.xf-jiaoyu1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-yiliao1"></i>
                    <div class="name">医疗</div>
                    <div class="fontclass">.xf-yiliao1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zhengmingwenjian"></i>
                    <div class="name">证明文件</div>
                    <div class="fontclass">.xf-zhengmingwenjian</div>
                </li>
            
                <li>
                <i class="icon xffont xf-tousu"></i>
                    <div class="name">投诉</div>
                    <div class="fontclass">.xf-tousu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zhifubao"></i>
                    <div class="name">支付宝</div>
                    <div class="fontclass">.xf-zhifubao</div>
                </li>
            
                <li>
                <i class="icon xffont xf-qiehuanshenfen"></i>
                    <div class="name">切换身份</div>
                    <div class="fontclass">.xf-qiehuanshenfen</div>
                </li>
            
                <li>
                <i class="icon xffont xf-gengxin"></i>
                    <div class="name">更新</div>
                    <div class="fontclass">.xf-gengxin</div>
                </li>
            
                <li>
                <i class="icon xffont xf-point"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.xf-point</div>
                </li>
            
                <li>
                <i class="icon xffont xf-banli1"></i>
                    <div class="name">办理</div>
                    <div class="fontclass">.xf-banli1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-daili"></i>
                    <div class="name">代理 (1)</div>
                    <div class="fontclass">.xf-daili</div>
                </li>
            
                <li>
                <i class="icon xffont xf-qian"></i>
                    <div class="name">钱</div>
                    <div class="fontclass">.xf-qian</div>
                </li>
            
                <li>
                <i class="icon xffont xf-QQ"></i>
                    <div class="name">QQ</div>
                    <div class="fontclass">.xf-QQ</div>
                </li>
            
                <li>
                <i class="icon xffont xf-weixin1"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.xf-weixin1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-duigou"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.xf-duigou</div>
                </li>
            
                <li>
                <i class="icon xffont xf-dangfeijiaona"></i>
                    <div class="name">党费缴纳</div>
                    <div class="fontclass">.xf-dangfeijiaona</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zixun_icon"></i>
                    <div class="name">zixun_icon</div>
                    <div class="fontclass">.xf-zixun_icon</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jianyi"></i>
                    <div class="name">建议</div>
                    <div class="fontclass">.xf-jianyi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-daili1"></i>
                    <div class="name">代理</div>
                    <div class="fontclass">.xf-daili1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jiuyechuangye"></i>
                    <div class="name">就业创业</div>
                    <div class="fontclass">.xf-jiuyechuangye</div>
                </li>
            
                <li>
                <i class="icon xffont xf-yewubanli"></i>
                    <div class="name">业务办理</div>
                    <div class="fontclass">.xf-yewubanli</div>
                </li>
            
                <li>
                <i class="icon xffont xf-fankui"></i>
                    <div class="name">反馈</div>
                    <div class="fontclass">.xf-fankui</div>
                </li>
            
                <li>
                <i class="icon xffont xf-wenjianluru"></i>
                    <div class="name">录入</div>
                    <div class="fontclass">.xf-wenjianluru</div>
                </li>
            
                <li>
                <i class="icon xffont xf-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.xf-search</div>
                </li>
            
                <li>
                <i class="icon xffont xf-hege"></i>
                    <div class="name">合格投资者认证</div>
                    <div class="fontclass">.xf-hege</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jibenxinxi2"></i>
                    <div class="name">基本信息</div>
                    <div class="fontclass">.xf-jibenxinxi2</div>
                </li>
            
                <li>
                <i class="icon xffont xf-gantanhao"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.xf-gantanhao</div>
                </li>
            
                <li>
                <i class="icon xffont xf-lurudingdan"></i>
                    <div class="name">录入订单</div>
                    <div class="fontclass">.xf-lurudingdan</div>
                </li>
            
                <li>
                <i class="icon xffont xf-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.xf-bangzhu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-dangfei"></i>
                    <div class="name">党费</div>
                    <div class="fontclass">.xf-dangfei</div>
                </li>
            
                <li>
                <i class="icon xffont xf-danweiCopy_fuzhi"></i>
                    <div class="name">单位</div>
                    <div class="fontclass">.xf-danweiCopy_fuzhi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-banshi"></i>
                    <div class="name">网上办事服务</div>
                    <div class="fontclass">.xf-banshi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-suo"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.xf-suo</div>
                </li>
            
                <li>
                <i class="icon xffont xf-cundang"></i>
                    <div class="name">存档</div>
                    <div class="fontclass">.xf-cundang</div>
                </li>
            
                <li>
                <i class="icon xffont xf-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.xf-tianjia</div>
                </li>
            
                <li>
                <i class="icon xffont xf-guanyu"></i>
                    <div class="name">关于</div>
                    <div class="fontclass">.xf-guanyu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-liulan"></i>
                    <div class="name">浏览</div>
                    <div class="fontclass">.xf-liulan</div>
                </li>
            
                <li>
                <i class="icon xffont xf-huanlingjianyanhegebiaozhi"></i>
                    <div class="name">换领检验合格标志</div>
                    <div class="fontclass">.xf-huanlingjianyanhegebiaozhi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-qinglihuancun"></i>
                    <div class="name">清理缓存</div>
                    <div class="fontclass">.xf-qinglihuancun</div>
                </li>
            
                <li>
                <i class="icon xffont xf-daochu"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.xf-daochu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.xf-dianhua</div>
                </li>
            
                <li>
                <i class="icon xffont xf-renyuanbaoming"></i>
                    <div class="name">人员报名</div>
                    <div class="fontclass">.xf-renyuanbaoming</div>
                </li>
            
                <li>
                <i class="icon xffont xf-tuisongrenwu"></i>
                    <div class="name">推送任务</div>
                    <div class="fontclass">.xf-tuisongrenwu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-box-"></i>
                    <div class="name">box-4</div>
                    <div class="fontclass">.xf-box-</div>
                </li>
            
                <li>
                <i class="icon xffont xf-luruxinxi"></i>
                    <div class="name">录入信息</div>
                    <div class="fontclass">.xf-luruxinxi</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jianyi1"></i>
                    <div class="name">建议</div>
                    <div class="fontclass">.xf-jianyi1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jiaoyu2"></i>
                    <div class="name">教育</div>
                    <div class="fontclass">.xf-jiaoyu2</div>
                </li>
            
                <li>
                <i class="icon xffont xf-huihan"></i>
                    <div class="name">回函</div>
                    <div class="fontclass">.xf-huihan</div>
                </li>
            
                <li>
                <i class="icon xffont xf-cha"></i>
                    <div class="name">叉</div>
                    <div class="fontclass">.xf-cha</div>
                </li>
            
                <li>
                <i class="icon xffont xf-banli"></i>
                    <div class="name">办理</div>
                    <div class="fontclass">.xf-banli</div>
                </li>
            
                <li>
                <i class="icon xffont xf-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.xf-wode</div>
                </li>
            
                <li>
                <i class="icon xffont xf-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.xf-mima</div>
                </li>
            
                <li>
                <i class="icon xffont xf-up"></i>
                    <div class="name">三角下标（正方形）</div>
                    <div class="fontclass">.xf-up</div>
                </li>
            
                <li>
                <i class="icon xffont xf-piliangdaochu"></i>
                    <div class="name">批量导出</div>
                    <div class="fontclass">.xf-piliangdaochu</div>
                </li>
            
                <li>
                <i class="icon xffont xf-jibenxinxi3"></i>
                    <div class="name">基本信息</div>
                    <div class="fontclass">.xf-jibenxinxi3</div>
                </li>
            
                <li>
                <i class="icon xffont xf-wode1"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.xf-wode1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-banshidating"></i>
                    <div class="name">办事大厅</div>
                    <div class="fontclass">.xf-banshidating</div>
                </li>
            
                <li>
                <i class="icon xffont xf-shouye1"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.xf-shouye1</div>
                </li>
            
                <li>
                <i class="icon xffont xf-zixun1"></i>
                    <div class="name">资讯</div>
                    <div class="fontclass">.xf-zixun1</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">xffont</span> <span class="hljs-selector-tag">xf-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"xffont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
